<template>
	<view class="zai-box">
		<scroll-view scroll-y class="page">
			<view style="text-align: center;">
				<image src="/static/logo.png" mode='aspectFit' class="zai-logo" @click="goUrlConfig"></image>
				<view class="zai-title">数字化工厂</view>
			</view>
			<view class="box padding-lr-xl login-paddingtop">

				<view class="cu-form-group margin-top round shadow-blur">
					<view class="title">用户名:</view>
					<input placeholder="请输入用户名" name="input" v-model="userName"></input>
				</view>
				<view class="cu-form-group margin-top round">
					<view class="title">密 码:</view>
					<input placeholder="请输入密码" name="input" type="password" v-model="password"></input>
				</view>
				<view class="padding  flex  flex-direction">
					<button class="cu-btn bg-green  round lg" :loading="loading" @tap="onLogin"> {{loading ? "登录中...":"登 录"}}
					</button>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="padding flex flex-direction  text-center  ">
					当前版本:{{version}}
				</view>
				<!-- #endif -->
				<view>
					<image class="set" src="/static/set.png" mode='aspectFit' @click="goUrlConfig"></image>
				</view>

			</view>
		</scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/logo.png" mode="aspectFit"></image>
			<view class="gray-text">登录中...</view>
		</view>
		<!-- <my-image-upload></my-image-upload>
		<my-select></my-select> -->
		<!-- <my-page></my-page> -->
	</view>

</template>

<script>
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants"
	import {
		mapActions
	} from "vuex"
	import myImageUpload from "@/components/my-componets/my-image-upload.vue"
	import mypage from "@/components/my-componets/my-page.vue"
	import myselect from "@/components/my-componets/my-select.vue"
	import appUpdate from 'common/util/appUpdate.js'
	export default {
		components: {
			'my-image-upload': myImageUpload,
			'my-select': myselect
		},
		data() {
			return {
				loading: false,
				userName: '',
				password: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version: '',
				createBy:''
			};
		},
		onLoad: function() {
			// #ifdef APP-PLUS
			var that = this
			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.version = wgtinfo.version
			});
			// #endif
		},
		onShow() {
			this.userName = uni.getStorageSync('userName');
			let ls_baseUrl = uni.getStorageSync('ls_baseUrl')
			if (ls_baseUrl){
				this.$http.config.baseUrl = ls_baseUrl
			}
		},
		methods: {
			...mapActions(["mLogin", "PhoneLogin"]),
			goUrlConfig() {
				uni.navigateTo({
					url: "/pages/mcloud/urlConfig"
				})
			},
			onLogin() {
				if (!this.userName || this.userName.length == 0) {
					this.$tip.toast('请输入用户名');
					return;
				}
				if (!this.password || this.password.length == 0) {
					this.$tip.toast('请输入密码');
					return;
				}
				let loginParams = {
					username: this.userName,
					password: this.password
				}
				uni.setStorageSync('userName', this.userName);//将名字存入缓存

				this.loading = true;
				let that = this
				this.mLogin(loginParams).then((res) => {
					this.loading = false;
					if (res.data.success) {
						this.$tip.success('登录成功')
						this.$Router.replaceAll({
							name: 'index'
						})
					} else {
						this.$tip.alert(res.data.message);
					}
				}).catch((err) => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.$tip.alert(msg);
				}).finally(() => {
					this.loading = false;
				})
			}
		}
	}
</script>

<style>
	.login-paddingtop {
		padding-top: 100rpx;
	}

	.zai-box {
		padding: 0 20 upx;
		padding-top: 100 upx;
		position: relative;
	}

	.zai-logo {
		width: 200upx;
		height: 250rpx;
		margin-top: 100rpx;
	}

	.set {
		position: fixed;
		z-index:99;
		bottom: 220rpx;
		right: 30rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.zai-title {
		font-size: 58upx;
		color: #000000;
		text-align: center;
	}

	.input-placeholder,
	.zai-input {
		/* color: #94afce; */
	}

	.zai-label {
		padding: 60 upx 0;
		text-align: center;
		font-size: 30 upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100 upx;
		font-size: 36 upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1 upx, 1 upx);
	}

	.title {
		width: 25%;
	}
</style>
